import React, { useEffect, useState } from 'react'
import { sousou } from '../../api'
import { IndexBar, List } from 'antd-mobile'
import { useDispatch } from 'react-redux'
import { di } from '../../store/di'
import { useNavigate } from 'react-router-dom'
function Index() {

  const [list,setList]=useState([])
  const getData=async()=>{
    const resp=await sousou()
    console.log(resp);
    setList(resp.data.data)
  }
  useEffect(()=>{
    getData()
  },[])
  const naviagte=useNavigate()
  const dispatch=useDispatch()
  const dian=(value)=>{
    dispatch(di(value))
    naviagte(-1)
  }
  return (
    <div>
       <div style={{ height: window.innerHeight }}>
      <IndexBar>
        {list.cityList?.map(group => {
          const { title, citys } = group
          return (
            <IndexBar.Panel
              index={title}
              title={`标题${title}`}
              key={`标题${title}`}
            >
              <List>
                {citys.map((item, index) => (
                  <List.Item key={index} onClick={()=>dian(item.name)}>{item.name}</List.Item>
                ))}
              </List>
            </IndexBar.Panel>
          )
        })}
      </IndexBar>
    </div>
    </div>
  )
}

export default Index
